<template>
	<view class="page b-bg">
		<!-- <view class="block">
			<view class="tabs">
				<view class="tab" @tap="change(index)" v-for="(item,index) in tab" :key="index" :class="{active:index == current}">
					{{item.name}}
				</view>
			</view>
		</view> -->
		<headnav leftText="我的作品"></headnav>
		<view class="block items">
			<scroll-view class="inner" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
				<view class="item" v-for="(item,index) in list" :key= "index" >
					<view class="imgBox" @tap="goDetail(item.id)" :style="{ backgroundImage: `url(${$ft.getCover(item.file_list)})`}">
						<view class="statusBox" v-show="current === 0">
							<view @tap.stop='showReason(item.msg)'>{{$ft.verifyStatus(item.status)}}</view>
						</view>
					</view>
					<view class="info">
						<view class="title" @tap="goDetail(item.id)">
							{{item.title}}
						</view>
						<view class="f-title">
							{{item.student_name}} | {{item.school}}
						</view>
					<!-- 	<view class="f-title">
							{{item.collect_total}} 点赞
						</view> -->
						<view class="btns" v-show="current === 0">
							<view class="bt" v-show="item.btn_del" @tap="delet(item.id,index)">
								<img src="/static/img/shanchu.png" alt="" class="detImg">删除
							</view>
						<!-- 	<view class="bt bt2" v-show="item.download" @tap="look(item.download)">查看证书</view> -->
							<view class="bt bt2" @tap="look(item.download)" v-show="item.download">查看证书</view>
						</view>
						<view class="btns" v-show="current === 1">
							<view class="bt" @tap="delet_collect(item.collect_id,index)">取消点赞</view>
						</view>
					</view>
				</view>
				<view class="more-bottom">
					<text v-show="!page.is_bottom">加载中...</text>
					<text v-show="page.is_bottom">没有更多了></text>
				</view>
				
		    </scroll-view>
		</view>
		<view class="btnWrap" v-if="token">
			<view class="btnBox" @tap="loginOut">
				退出登录
			</view>
		</view>
		<loginD ref='loginx'></loginD>
	</view>
</template>

<script>
	import mixin from '../../util/mixin';
	export default {
		mixins:[mixin],
		data() {
			return {
				tab:[
					{name:"我的作品",id:1},
					{name:"我的点赞",id:2}
				],
				list:[],
				page:{
					is_bottom:false,
					page:1
				},
				token:false,
				current:0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				goid:''
			}
		},
		onLoad(options) {
			const token = uni.getStorageSync('token');
			if(token) {
				this.token = true;
			}
			this.goid = options.id;
			this.render1(null)
		},
		methods:{
			loginOut() {
			   uni.setStorageSync('token','');
			   uni.setStorageSync('refresh','');
			   uni.reLaunch({
			   	 url:'/pages/index/index'
			   })
			},
			async render1(res) {
				if(res) {
					this.list = [];
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'user/article/' + this.goid,
						  method:'get',
						  data:{}
					})
					console.log(res);
					this.list.push(...res.data.data);
					// console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			async render2(res) {
				var id = this.$route.query.id;
				if(res) {
					this.list = [];
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'user/collect/' + id,
						  method:'get',
						  data:{}
					})
					this.list.push(...res.data);
					//console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			async delet(id,index) {
				//console.log(id);
				// const res = await this.$http({
				// 	  url:'article/' + id,
				// 	  method:'DELETE',
				// 	  data:{}
				// })
				// console.log(index);
				
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除？',
					success: async(res) => {
						if (res.confirm) {
						    const res = await this.$http({
						    	  url:'article/' + id,
						    	  method:'DELETE',
						    	  data:{}
						    })
							//console.log(res);
							if(res) {
								_this.toast('删除成功成功')
								_this.list.splice(index,1)
							}
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
						return false;
					}
				});
			},
			async delet_collect(id,index){
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否取消点赞？',
					success: async(res) => {
						if (res.confirm) {
						    const res = await this.$http({
						    	  url:'user/collect/',
						    	  method:'post',
						    	  data:{
									  collect_id:id
								  }
						    })
							//console.log(res);
							if(res) {
								_this.toast('取消成功')
								_this.list.splice(index,1)
							}
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
						return false;
					}
				});
				
			},
			look(go) {
				uni.navigateTo({
					url:'/pages/look/look?url=' + go
				})
			},
			change(index) {
				this.current = index;
				if(this.current === 0) {
					this.render1(1)
				}
				if(this.current == 1) {
					this.render2(1)
				}
			},
			scrolltolower() {
				if(this.current === 0) {
					this.render1(null)
				}
				if(this.current == 1) {
					this.render2(null)
				}
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop;
				//console.log(this.old.scrollTop);
			},
			showReason(msg) {
				if(msg) {
					uni.showToast({
						title:msg,
						icon:'none',
						time:2000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.btnWrap {
		position: fixed;
		bottom: 80rpx;
		left:0;
		right: 0;
		padding-top: 136rpx;
		display: flex;
		justify-content: center;
		.btnBox {
			@include bottomBtn
		}
	}
  .block {
		padding: 30rpx 30rpx 0;
	}
   .tabs {
	   width: 100%;
	   border-radius: 20rpx;
	   background-color: #fff;
	   padding: 36rpx 28rpx;
	   font-size: 30rpx;
	   display: flex;
	   .tab {
		     margin-right: 40rpx;
		   &.active {
			   color:$color-primary;
			   
		   }
	   }
   }
   .items {
	    padding: 34rpx;
		.imgBox {
			border-radius: 20rpx;
			overflow: hidden;
			width: 300rpx;
			height: 200rpx;
			position: relative;
			.statusBox {
				position: absolute;
				left: 20rpx;
				top:20rpx;
				font-size: 14rpx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.3);
				padding: 5rpx 15rpx;
				border-radius: 5dwpx;
			}
		}
	   .inner {
		   border-radius: 30rpx;
		   
		  
		   display: flex;
		   justify-content: space-between;
		   flex-wrap: wrap;
		   position: fixed;
		   top:124rpx;
		   left:34rpx;
		   width: 685rpx;
		   bottom:34rpx;
	   }
	   .item {
		   display: flex;
		   justify-content: space-between;
		   // background-color: #fff;
		   margin-bottom: 30rpx;
		   .imgBox {
		   	 width: 310rpx;
			 height: 230rpx;
		   }
		   .info {
			   width: 350rpx;
			   padding-top: 10rpx;
			   .title {
				   font-weight: 550;
				   margin-bottom: 14rpx;
				   height: 88rpx;
				   @include textTwo();
			   }
			   .f-title {
				   font-size: 26rpx;
				   margin-bottom: 30rpx;
				    @include text();
			   }
		   }
		   .btns {
			   display: flex;
			   .bt {
				   margin-right: 20rpx;
				   color:#f4563c;
				   padding: 6rpx 18rpx 0 0;
				   font-size: 28rpx;
				   border-radius: 10rpx;
				   .detImg {
					   width: 32rpx;
					   margin-right: 10rpx;
					   vertical-align: text-bottom;
					   position: relative;
					   top:-2px;
				   }
				   &.bt2 {
					   background-color: #ffad4c;
				   }
			   }
		   }
	   }
	   
   }
</style>
